<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>控制后台</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-control" content="no-cache,no-store,must-revalidate">
  <meta http-equiv="Cache" content="no-cache">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../component/pear/css/pear-notable.css" />
  <link rel="stylesheet" href="../../admin/css/other/console1.css" />
  <link rel="stylesheet" href="/common/badge.min.css">
  <link rel="stylesheet" href="css/usm-zl-statistics.css"/>
  <style>
    .dtree-scroll{
      /* height: calc(100vh - 5px)!important; */
      /* height: 100vh!important; */
      height: 200px!important;
      text-align: left;
      overflow: auto;
    }
    .select-date-wrapper{
      height: 100%!important;
    }
    .layui-table-body .layui-none{
      padding: 10px 15px;
    }
  </style>
</head>
<body>
  <div class="pear-container">
    <!-- 选项 -->
    <div class="layui-row layui-col-space10">
      <div class="layui-col-xs12">
        <div class="layui-collapse">
          <div class="layui-colla-item">
            <h2 class="layui-colla-title" id="selectCardHeader">选项</h2>
            <div class="layui-colla-content layui-show">
              <div class="layui-row layui-col-space10">
                <div class="layui-col-xs6">
                  <div class="layui-card top-panel">
                    <div class="layui-card-header" >选择机台</div>
                    <div class="layui-card-body dtree-scroll" id="dtree-scroll-wrapper">
                      <ul id="demoTree" class="dtree" data-id="0"></ul>
                    </div>
                  </div>
                </div>
                <div class="layui-col-xs6">
                  <div class="layui-card top-panel" style="height: 263px;">
                    <div class="layui-card-body select-date-wrapper">
                      <label class="layui-form-label" style="text-align: center;">选择日期</label>
                      <div class="layui-input-block">
                        <input id="searchDateRange" class="layui-input" type="text" autocomplete="off" placeholder="选择日期范围">
                      </div>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 数据 -->
    <div class="layui-row layui-col-space10" id="tableView">
    </div>
  </div>

  <script src="../../component/layui/layui.js"></script>
  <script src="../../component/pear/pear.js"></script>
  <script src="../../lay-ext/dayjs.min.js"></script>

  <script>
    	// 加载自定义模块,检查浏览器和token
			layui.extend({
        myheader: "{/}/lay-ext/myheader",
      });
      layui.use(['layer', 'echarts', 'element', 'count','dtree','myheader','popup','laydate','table'], function() {
        var $ = layui.jquery,
					layer = layui.layer,
					element = layui.element,
					count = layui.count,
					echarts = layui.echarts,
					dtree=layui.dtree,
					myheader=layui.myheader,
					popup=layui.popup, 
					laydate=layui.laydate,
					table=layui.table
          laytpl=layui.laytpl;

				// 定义全局 ajax的请求头
				myheader.ajaxGlobal(myheader.checkToken().tokenValue);
				// 定义常量
				const baseUrl = myheader.baseUrl();

				// 定义默认值
				// 默认日期为今天
				var selectedDate= dayjs().format("YYYY-MM-DD") +' ~ ' +dayjs().format("YYYY-MM-DD")
				var selectedMachineNo =""

        				// 渲染并获树的实例
				const demoTree = dtree.render({
					elem: "#demoTree",
					initLevel: "1",
					width:"100%",
					scroll:"#dtree-scroll-wrapper",
					method: 'get',
					url: baseUrl+"/machineOgztionDTree/find4UsmZl?_t="+new Date().getTime(),
				});
        //dtree事件 node(节点)
				dtree.on("node('demoTree')",function(obj){
					if(!obj.param.leaf){
						demoTree.clickSpread(obj.dom);  //调用内置函数展开节点
					} else {
						selectedMachineNo=obj.param.context
						getUsmBtStatisticsData(selectedMachineNo,selectedDate)
					}
				})
        // 日期事件
        laydate.render({
					elem: '#searchDateRange' //指定元素
					,value: selectedDate
          ,range:'~'
					,done:function(value){
						selectedDate=value
						getUsmBtStatisticsData(selectedMachineNo,selectedDate)
					}
				});

        function getUsmBtStatisticsData(selectedMachineNo,selectedDate){


          if(selectedMachineNo=='' || selectedDate=='') return 
          $.ajax(baseUrl+"/usmZlRecord/getRecord",{
            type:'get',
            timeout:10000,
            data:{
							selectedMachineNo:selectedMachineNo,
							selectedDate:selectedDate
						},
            success:function(res){
              if(res.data==null) {
                document.getElementById("tableView").innerHTML=''
                return
               } 
              renderDataView(res.data)
            }
          })
        }

        function renderDataView(data){
          var tplHtml = document.getElementById("tableTpl").innerHTML
          var tplViewObj = document.getElementById("tableView")
          laytpl(tplHtml).render(data,function(html){
            tplViewObj.innerHTML=html
          })
        }

      })
  </script>

  <script id="tableTpl" type="text/html">
    {{# layui.each(d,function(index,item){ }}
    {{# console.log(item) }}
    <div class="layui-col-md4" >
      <div class="layui-panel" style="display:flex;justify-content: center;align-items: center; padding:10px 0">
        <table border="0" cellpadding="0" cellspacing="0" width="216" style="border-collapse: 
 collapse;table-layout:fixed;width:222pt">
          <col class="x25" width="72">
          <col width="72" span="2" style="width:54pt">
          <tr height="18"  id="r0">
            <td height="16" class="x22" width="72" style="height:14pt;width:54pt;">日期</td>
            <td colspan="2" class="x26" width="144"
              style="border-right:1px solid windowtext;border-bottom:1px dotted windowtext;">{{= item.recordTimeDT}}</td>
          </tr>
          <tr height="18"  id="r0">
            <td height="16" class="x22" width="72" style="height:14pt;width:54pt;">传票号</td>
            <td colspan="2" class="x26" width="144"
              style="border-right:1px solid windowtext;border-bottom:1px dotted windowtext;">{{= item.lotNo}}</td>
          </tr>
          <tr height="18"  id="r1">
            <td height="16" class="x21" style="height:14pt;">型号</td>
            <td colspan="2" class="x28" style="border-right:1px solid windowtext;border-bottom:1px dotted windowtext;">{{= item.productCode}}</td>
          </tr>
          <tr height="18"  id="r2">
            <td height="16" class="x21" style="height:14pt;">素子批号（1）</td>
            <td colspan="2" class="x28" style="border-right:1px solid windowtext;border-bottom:1px dotted windowtext;">{{= item.chipRecord1}}</td>
          </tr>
          <tr height="18"  id="r3">
            <td height="16" class="x21" style="height:14pt;">素子批号（2）</td>
            <td colspan="2" class="x28" style="border-right:1px solid windowtext;border-bottom:1px dotted windowtext;">{{= item.chipRecord2}}</td>
          </tr>
          <tr height="18"  id="r4">
            <td height="16" class="x21" style="height:14pt;">素子批号（3）</td>
            <td colspan="2" class="x28" style="border-right:1px solid windowtext;border-bottom:1px dotted windowtext;">{{= item.chipRecord3}}</td>
          </tr>
          <tr height="18"  id="r5">
            <td height="16" class="x23" style="height:14pt;">良品数（1列）</td>
            <td colspan="2" class="x28" style="border-right:1px solid windowtext;border-bottom:1px dotted windowtext;">{{= item.okCount1}}</td>
          </tr>
          <tr height="18"  id="r6">
            <td height="16" class="x23" style="height:14pt;">良品数（2列）</td>
            <td colspan="2" class="x28" style="border-right:1px solid windowtext;border-bottom:1px dotted windowtext;">{{= item.okCount2}}</td>
          </tr>
          <tr height="18"  id="r7">
            <td height="16" class="x23" style="height:14pt;">良品数（3列）</td>
            <td colspan="2" class="x28" style="border-right:1px solid windowtext;border-bottom:1px dotted windowtext;">{{= item.okCount3}}</td>
          </tr>
          <tr height="18"  id="r8">
            <td height="16" class="x24" style="height:14pt;">良品数（4列）</td>
            <td colspan="2" class="x30" style="border-right:1px solid windowtext;border-bottom:1px solid windowtext;">{{= item.okCount4}}</td>
          </tr>
          <tr height="18"  id="r8">
            <td height="16" class="x24" style="height:14pt;">良品合计</td>
            <td colspan="2" class="x30" style="border-right:1px solid windowtext;border-bottom:1px solid windowtext;">{{= item.okCount1+item.okCount2+item.okCount3+item.okCount4}}</td>
          </tr>

        </table>
      </div>
    </div>
    {{#  }) }}
  </script>

</body>
</html>